<script setup lang="ts">
// 滑动到一定距离显示
import { ref, onMounted, onUnmounted } from 'vue'
const isFixed = ref(false)
const fixedOffest = 200
const handleScroll = () => {
  isFixed.value = window.scrollY > fixedOffest
}
onMounted(() => {
  window.addEventListener('scroll', handleScroll)
})
onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})
// 点击后返回顶部
const hasClick = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  })
}
</script>

<template>
  <div class="footer">
    <div class="introduce">
      <div>
        <img src="/images/ordinaryPicture/islideLogo.png">
      </div>
      <div>
        <dl>
          <div>
            <dt>产品</dt>
            <dd><a href="#">客户端下载</a></dd>
            <dd><a href="#">产品功能</a></dd>
            <dd><a href="#">牛马社课堂</a></dd>
            <dd><a href="#">PPT模板</a></dd>
            <dd><a href="#">会员定价</a></dd>
          </div>
          <div>
            <dt>服务</dt>
            <dd><a href="#">企业服务</a></dd>
            <dd><a href="#">企业培训</a></dd>
            <dd><a href="#">定制服务</a></dd>
            <dd><a href="#">私有化部署</a></dd>
          </div>
          <div>
            <dt>帮助</dt>
            <dd><a href="#">使用指南</a></dd>
            <dd><a href="#">常见问题</a></dd>
            <dd><a href="#">功能教程</a></dd>
            <dd><a href="#">企业版</a></dd>
          </div>
          <div>
            <dt>关于</dt>
            <dd><a href="#">关于我们</a></dd>
            <dd><a href="#">联系我们</a></dd>
            <dd><a href="#">讲师联盟</a></dd>
            <dd><a href="#">博客</a></dd>
          </div>
          <div>
            <dt>支持</dt>
            <dd><a href="#">版权声明</a></dd>
            <dd><a href="#">隐私声明</a></dd>
            <dd><a href="#">用户协议</a></dd>
            <dd><a href="#">会员协议</a></dd>
            <dd><a href="#">AI服务协议</a></dd>
          </div>
          <div>
            <dt>关注</dt>
            <dd><a href="#">官方微博</a></dd>
            <dd><a href="#">官方知乎</a></dd>
            <dd><a href="#">微信公众号</a></dd>
            <img src="/images/ordinaryPicture/qrcode.png">
          </div>
        </dl>
      </div>
    </div>
    <div class="hasBorder">
      <div>
        <a href="#" class="chinese">简体中文</a>
        <span></span>
        <a href="#">English</a>
      </div>
      <div>
        <ul>
          <li><a href="#">PPTmall</a></li>
          <li><a href="#">文稿PPT</a></li>
          <li><a href="#">字库</a></li>
          <li><a href="#">找图网</a></li>
          <li><a href="#">图表秀</a></li>
          <li><a href="#">OfficePLUS</a></li>
          <li><a href="#">会译•沉浸式翻译</a></li>
        </ul>
      </div>
    </div>
    <div class="information">
      <div class="informationChild">
        <div>成都艾斯莱德网络科技有限公司</div>
        <div>知识产权顾问：泰和泰律师事务所</div>
      </div>
      <div class="informationChild">
        <div>四川省成都市易上OCG国际中心C座15楼&emsp;|&emsp;028-33010382</div>
        <div>© 2016-2025 iSlide 保留一切权利&emsp;|&emsp;蜀ICP备16016339号-1&emsp;|&emsp;川公网安备 51019002001019号</div>
      </div>
    </div>
  </div>
  <div class="fixedDiv">
    <div class="onlineCustom">
      <img src="/images/backgroundImg/onlineCustom.png">
      <div class="blockWhiteBox">
        客服在线时间：<br>
        周一至周五 9:30-18:00
      </div>
      <div class="arrow arrow1"></div>
    </div>
    <div class="firstSvgFath">
      <div class="firstSvg">
        <svg width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" focusable="false">
          <path
            d="M10.3536 12.9795L14.1464 9.18656C14.4614 8.87158 14.2383 8.33301 13.7929 8.33301H6.20711C5.76165 8.33301 5.53857 8.87158 5.85355 9.18656L9.64645 12.9795C9.84171 13.1747 10.1583 13.1747 10.3536 12.9795Z">
          </path>
          <path
            d="M17.5 17.0833V18.0833C18.0523 18.0833 18.5 17.6356 18.5 17.0833H17.5ZM2.5 17.0833H1.5C1.5 17.6356 1.94772 18.0833 2.5 18.0833V17.0833ZM3.5 12.5C3.5 11.9477 3.05228 11.5 2.5 11.5C1.94772 11.5 1.5 11.9477 1.5 12.5H3.5ZM18.5 12.5C18.5 11.9477 18.0523 11.5 17.5 11.5C16.9477 11.5 16.5 11.9477 16.5 12.5H18.5ZM17.5 16.0833H2.5V18.0833H17.5V16.0833ZM3.5 17.0833V12.5H1.5V17.0833H3.5ZM18.5 17.0833V12.5H16.5V17.0833H18.5Z">
          </path>
          <path
            d="M11 2.08301C11 1.53072 10.5523 1.08301 10 1.08301C9.44772 1.08301 9 1.53072 9 2.08301H11ZM9 11.2497C9 11.802 9.44772 12.2497 10 12.2497C10.5523 12.2497 11 11.802 11 11.2497H9ZM9 2.08301V11.2497H11V2.08301H9Z">
          </path>
        </svg>
      </div>
      <div class="nowDown">立即下载</div>
      <div class="arrow arrow2"></div>
    </div>
    <div class="secondSvg" v-if="isFixed" :class="{ 'fixed-div': isFixed }" @click="hasClick">
      <svg width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
        aria-hidden="true" focusable="false" class="">
        <rect x="4.16675" y="3.75" width="11.6667" height="1.66667" rx="0.833333"></rect>
        <path
          d="M4.07297 15.0008L9.62621 8.75343C9.82511 8.52967 10.1747 8.52967 10.3736 8.75343L15.9269 15.0008C16.2135 15.3233 15.9846 15.833 15.5532 15.833H4.44667C4.01525 15.833 3.78635 15.3233 4.07297 15.0008Z">
        </path>
      </svg>
    </div>
    <div class="secondSvg1" v-else></div>
  </div>
</template>

<style scoped lang="less">
.footer {
  width: 100%;
  min-width: 1300px;
  background-color: #fff;
}

.introduce {
  display: flex;
  justify-content: center;
  margin-top: 80px;
  font-size: 14px;

  img {
    display: block;
    width: 110px;
  }

  dl {
    display: flex;
    justify-content: center;
    margin-left: 50px;

    div {
      margin-left: 50px;
      margin-right: 50px;

      dt {
        font-weight: bold;
        margin-bottom: 20px;
      }

      dd {
        display: block;
        white-space: nowrap;

        a {
          color: rgb(143, 149, 159);
          display: flex;
          margin-top: 10px;
          margin-bottom: 10px;
        }
      }
    }
  }
}

.hasBorder {
  width: 1180px;
  margin: 0 auto;
  display: flex;
  margin-top: 100px;
  padding-bottom: 30px;
  border-bottom: 1px solid rgb(236, 240, 246);

  .chinese {
    color: rgb(139, 147, 155);
  }

  a {
    color: rgb(161, 166, 174);
  }

  span {
    display: inline-block;
    height: 10px;
    margin: 0 17px;
    border-left: 2px solid rgb(161, 166, 174);
  }

  ul {
    display: flex;
    margin-left: 90px;

    li a {
      display: block;
      padding-left: 10px;
      padding-right: 10px;

      &:hover {
        color: rgb(89, 99, 112);

      }
    }
  }
}

.information {
  width: 1180px;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 30px;

  .informationChild {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #bfc8d2;
    margin-bottom: 10px;
  }
}

// 固定导航
.fixedDiv {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 100;
  width: 45px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.onlineCustom {
  width: 45px;
  border-radius: 10px;
  position: relative;
  cursor: pointer;

  &:hover .arrow1 {
    display: block;
  }

  &:hover .blockWhiteBox {
    display: block;
  }

  img {
    width: 100%;
  }
}

.arrow {
  position: absolute;
  border: 8px solid transparent;
  border-left: 8px solid white;
  z-index: 100;
  width: 0;
  height: 0;
  line-height: 0;
  font-size: 16px;
  display: none;

  &::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    left: -10px;
  }

  &::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    top: -10px;
    left: -10px;
  }
}

.arrow1 {
  top: 56px;
  left: -18px;
}

.arrow2 {
  top: 28px;
  left: -20px;
}

.blockWhiteBox {
  position: absolute;
  z-index: 100;
  top: 30px;
  left: -210px;
  color: rgb(47, 47, 47);
  background: white;
  width: 180px;
  height: 60px;
  border-radius: 10px;
  padding-top: 12px;
  padding-left: 12px;
  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
  display: none;
}

.firstSvgFath {
  position: relative;

  &:hover .nowDown {
    display: block;
  }

  &:hover .arrow2 {
    display: block;
  }

  .nowDown {
    width: 100px;
    height: 40px;
    background-color: red;
    position: absolute;
    top: 15px;
    left: -120px;
    line-height: 40px;
    text-align: center;
    border-radius: 10px;
    z-index: 100;
    color: rgb(47, 47, 47);
    background: white;
    box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
    display: none;
  }
}

.firstSvg {
  background: #fff;
  width: 44px;
  height: 44px;
  cursor: pointer;
  margin-top: 12px;
  box-shadow: 0 4px 8px hsla(212, 5%, 50%, .16);
  border-radius: 100px;
  text-align: center;
  font-size: 20px;
  line-height: 44px;

  &:hover {
    background-color: rgb(248, 77, 77);

    svg {
      fill: #fff;
    }
  }
}

.secondSvg {
  background: #fff;
  width: 44px;
  height: 44px;
  cursor: pointer;
  box-shadow: 0 4px 8px hsla(212, 5%, 50%, .16);
  border-radius: 100px;
  text-align: center;
  font-size: 20px;
  line-height: 44px;
  margin-top: 40px;
  transition: all .5s;
  display: none;
}

.fixed-div {
  display: block;
}

// 占位盒子
.secondSvg1 {
  margin-top: 40px;
  width: 44px;
  height: 44px;
}
</style>
